<!-- 自定义底部导航栏 -->
<template>
  <view class="container">
    <view
        class="tabbar-item"
        :class="[item.centerItem ? ' center-item' : '']"
        :style="'width: calc(100% /' + tabbarList.length + ')'"
        @click="changeItem(item)"
        v-for="(item, i) in tabbarList"
        :key="i"
    >
      <view class="item-top"><image :src="curItem === item.id ? item.selectedIconPath : item.iconPath" /></view>
      <view class="item-bottom" :class="[curItem === item.id ? 'item-active' : '']">{{ item.text }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      curItem: 0, // 当前所选导航栏
      tabbarList: [
        {
          id: 0,
          pagePath : "/pages/home/home",
          text : "首页",
          iconPath:"/static/images/tab/icon-hone.png",
          selectedIconPath:"/static/images/tab/icon-home-active.png",
          centerItem: false
        },
        {
          id: 1,
          pagePath: "/pages/home/btnpublish",
          text: "发布",
          iconPath: "/static/images/tab/icon-plus.png",
          selectedIconPath: "/static/images/tab/icon-plus-active.png",
          centerItem: true
        },
        {
          id: 2,
          pagePath : "/pages/conversations/conversations",
          text : "消息",
          iconPath:"/static/images/tab/icon-message.png",
          selectedIconPath:"/static/images/tab/icon-message-active.png",
          centerItem: false
        },
        {
          id: 3,
          pagePath : "/pages/mine/mine",
          text : "我的",
          iconPath:"/static/images/tab/icon-user.png",
          selectedIconPath:"/static/images/tab/icon-user-active.png",
          centerItem: false
        }
      ] // 导航栏列表
    };
  },
  onReady() {
    this.curItem =  this.$globalData.selected
    console.log(this.curItem);
  },
  methods: {
    /* 导航栏切换 */
    changeItem(e) {
      this.$globalData.selected = e.id;
      uni.switchTab({ url: e.pagePath }); // 跳转到其他 tab 页面
    }
  }
};
</script>

<style lang="scss" scoped>
$textDefaultColor: #999; // 文字默认颜色
$bottomBg: #6C64D0; // 底部背景
$textSelectedColor: #fff; // 文字选中颜色
$centerItemBg: #6C64D0; // 中间凸起按钮背景
.container {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 110rpx;
  color: $textDefaultColor;
  padding: 5rpx 0;
  background-color: $bottomBg;
  box-shadow: 0 0 10rpx #999;
}
.tabbar-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100rpx;
  .item-top {
    flex-shrink: 0;
    width: 50rpx;
    height: 50rpx;
    padding: 4rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .item-bottom {
    width: 100%;
    font-size: 28rpx;
  }
  .item-active {
    color: $textSelectedColor;
  }
}
.center-item {
  position: relative;
  .item-top {
    position: absolute;
    top: -55rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 105rpx;
    height: 105rpx;
    line-height: 142rpx;
    background-color: $centerItemBg;
    border-radius: 50%;
    box-shadow: 0 -2rpx 5rpx 0 #999;
    image{
      width: 60rpx;
      height: 60rpx;
    }
  }
  .item-bottom {
    position: absolute;
    bottom: 5rpx;
  }
}
</style>
